<template>
	<view style="padding: 40rpx; margin-top: 100rpx;">
		<view style="padding: 20rpx; background-color: #fff; box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.3); border-radius: 10rpx;">
			<uni-title type="h3" title="欢迎注册" align="center"></uni-title>
			<uni-forms ref="formRef" :rules="rules" :modelValue="form" validateTrigger="blur">
				<uni-forms-item required name="username">
					<uni-easyinput v-model="form.username" placeholder="请输入账号" prefix-icon="person" />
				</uni-forms-item>
				<uni-forms-item required name="password">
					<uni-easyinput v-model="form.password" placeholder="请输入密码" prefix-icon="locked" />
				</uni-forms-item>
				<uni-forms-item>
					<button @click="handleRegister" style="background-color: #007f61; line-height: 70rpx; height: 70rpx;">注册</button>
				</uni-forms-item>
				<uni-forms-item>
					<view style="text-align: right;">已有账号？去<navigator style="display: inline-block; color: royalblue;" url="/pages/login/login">登录</navigator></view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					role: 'USER'
				},
				rules: {
				  username: {
				    rules: [{
				      required: true,
				      errorMessage: '请输入账号'
				    }]
				  },
				  password: {
				    rules: [{
				      required: true,
				      errorMessage: '请输入密码'
				    }]
				  }
				}
			}
		},
		methods: {
			handleRegister() {
				// 验证
				this.$refs.formRef.validate().then(res => {
				  this.$request.post('/register', this.form).then(res => {
				  	if (res.code === '200') {
				  		uni.showToast({
				  			icon: 'success',
				  			title: '注册成功'
				  		})
						setTimeout(() => {
							// 跳转登录页
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 500)
				  	} else {
				  		uni.showToast({
				  			icon: 'error',
				  			title: res.msg
				  		})
				  	}
				  })
				}).catch(err => {
				  console.log('err', err);
				})    
			}
		}
	}
</script>

<style>

</style>
